<template>
	<div class="goods-list">
		<!-- 
		 本次的路由链接，不使用 router-link 的方式（这种使用标签的方式，我们称为标签式链接）
		 我们使用 编程式链接的方式，通过 js 的方式进行路由链接
		 -->
		<div class="goods" v-for="item in goodslist" :key="item.id" @click="goDetail(item.type)">
			<img :src="item.url" />
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.now}}</span>
					<span class="old">￥{{item.old}}</span>
				</p>
				<p class="sell">
					<span>{{item.hostsale}}</span><span>剩{{item.surplus}}件</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {
		data(){
			return {
				goodslist:[]
			}
		},
		created() {
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				this.$http.get('../../data/goodslist.json').then(result => {
					if(result.body.length>0){
						this.goodslist = result.body;
					}
				},err => {
					Toast("获取商品列表失败")
				})
			},
			goDetail(id){
				
				/* 
				 注意：一定要区分 this.$route 和 this.$router 的区别
				 1、this.$route 是路由参数对象，所有的路由参数，例如 params、query 都属于它
				 2、this.$router 是路由导航对象，通过它，可以方便的使用 js 代码实现 前进、
				 后退、跳转到新的 url 地址
				 */
				//方式1：传递参数
				this.$router.push('/home/goodsinfo/'+id)
				//方式2：传递对象
				//this.$router.push({path:'/home/goodsinfo/'+id})
				//方式3：传递命名的路由
				//this.$router.push({name:"goodsinfo",params:{id:id}})
				//方式4：使用query 传参
				/* 
				 注意：
				 1、path 不能和 params 共用
				 2、使用了 query 传参的方式，组件的匹配规则需要改变
					（'/home/goodsinfo/:id' 改为 '/home/goodsinfo'）
					这是因为 url 的形式由 'goodsinfo/参数' 变成了 'goodsinfo?id=参数'
				 */
				//this.$router.push({path:"/home/goodsinfo",query:{id:id}})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.goods-list{
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.goods{
			width: 47vw;
			margin: 4px 0px;
			border: solid 2px lightgray;
			box-shadow: 0 0 10px #ccc;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			p{
				padding: 0px;
				margin: 0px;
			}
			img{
				width: 100%;
				height: 240px;
			}
			.title{
				font-size: 14px;
				padding-left: 2px;
				line-height: 20px;
			}
			.info{
				padding: 2px;
				background-color: #eee;
				.price{
					.now{
						font-size: 16px;
						color: red;
						margin-right: 10px;
						font-weight: bold;
					}
					.old{
						text-decoration: line-through;
						font-size: 12px;
					}
				}
				.sell{
					display: flex;
					justify-content: space-between;
					padding: 0px 5px;
				}
			}
		}
	}
</style>
